<div class="alarm-lamp">
  <button (click)="onFadeClick()" md-icon-button>
    <!-- <img class="lamp" [ngClass]="{'animated':isAlarm}"  src="../../../../assets/images/lamp.png">       -->
    <md-icon class="lamp" [ngClass]="{'animated':isAlarm}" svgIcon="assets:lamp"></md-icon>
    <span class="tips">{{alarmTotal}}</span>
  </button>
</div>
<!-- [hidden]="!fadeDiv" -->
<section class="alarm-section" [ngClass]="{'alarm-section-show':fadeDiv}">
  <section class="flex">
    <header class="alarm-section-title">
      <span>
        <button (click)="onAllConfirm()" [hidden]="active2 || active3">全部确认</button>
        <button (click)="substation.onAllConfirm()" [hidden]="active2 || active1">全部确认</button>
        <span class="close-alarm" (click)="onClickCloseAlarm()"></span>
      </span>
      <i (click)="isActive(1)" [class.active1]="active1">设备报警({{alarmTotal}})</i>
      <i (click)="isActive(2)" [class.active2]="active2">设备预警({{earlyWarningDataTotal}})</i>
      <i (click)="isActive(3)" [class.active3]="active3">升压站({{substationDataTotal}})</i>
      <div class="search">
        <p *ngIf="active1">等级：<input type="text" class="faultLevelName" [(ngModel)]="faultLevelName" placeholder="请输入等级"></p>
        <p *ngIf="active1 || active2">描述：<input type="text" class="desc" [(ngModel)]="desc" placeholder="请输入描述"></p>
        <p *ngIf="active1">类别：<input type="text" class="components" [(ngModel)]="components" placeholder="请输入类别"></p>
        <p *ngIf="active2">状态：<input type="text" class="stateName" [(ngModel)]="stateName" placeholder="请输入状态"></p>
      </div>
    </header>
    <section class=" flex-full" [hidden]="active2 || active3">
      <section class="alarm-section-summary flex">
        <!--广东部分取消报警/告警分类，暂时注释掉  -->
         <!--<header class="alarm-section-header">
          <span (click)="onAlarmCategoryClick(alarmCategory)" *ngFor="let alarmCategory of alarmCategoryDatas" [ngClass]="{on:alarmCategory.isChecked}">{{alarmCategory.alarmCategoryName}}</span>
        </header> -->
        <div class="flex-full">
          <div class="alarm-section-conter"
          *ngFor="let alarmCategory of alarmCategoryDatas"
          [hidden]="!alarmCategory.isChecked">
            <table class="zk-table">
              <thead>
                <tr>
                  <th>
                    <span>故障码</span>
                  </th>
                  <th>
                    <span>等级</span>
                  </th>
                  <th>
                    <span>描述</span>
                  </th>
                  <th>
                    <span>类别</span>
                  </th>
                  <th>
                    <span>时间</span>
                  </th>
                  <th>
                    <span></span>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let faultData of alarmCategory.faultTableDatas" [ngStyle]="{'color':faultData.confirm?'#fff':'#e6bd00','background':!faultData.confirm?'#00693e':'#026fdb'}">
                  <td>
                    <span [ngStyle]="{'background':faultData.faultLevelColor,'color':'#fff'}"> {{faultData.faultCode}} </span>
                  </td>
                  <td>
                    <span> {{faultData.faultLevelName}}</span>
                  </td>
                  <td>
                    <span> {{faultData.desc}}</span>
                  </td>
                  <td>
                    <span> {{faultData.components}}</span>
                  </td>
                  <!-- <td>
                    <span>{{faultData.farmName}}{{faultData.deviceName}}{{faultData.faultDesc}}</span>
                  </td>
                  <td>
                    <span> {{faultData.faultLevelName}}</span>
                  </td>
                  <td>
                    <span> {{faultData.turbComponentName}}-{{faultData.subcomponentName}}-{{faultData.partsName}} </span>
                  </td>      -->
                  <td>
                    <span> {{faultData.faultTime| date:'yyyy-MM-dd HH:mm:ss'}}</span>
                  </td>
                  <td>
                    <button (click)="onConfirm(faultData)" *ngIf="!faultData.confirm">确认</button>
                    <span *ngIf="faultData.confirm">已确认</span>
                  </td>
                </tr>
                <tbody>
            </table>
          </div>
        </div>

      </section>

      <section class="alarm-section-detailed">
        <div *ngFor="let alarmCategoryFarm of alarmCategoryFarmDatas" [hidden]="!alarmCategoryFarm.isChecked">
          <md-tab-group>
            <md-tab [label]="farmFault.farmName+'('+ farmFault?.confirmTotal +')'" *ngFor="let farmFault of alarmCategoryFarm.farmFaultDatas">
              <div class="alarm-section-conter">
                <table class="zk-table" cellspacing="0" cellpadding=0>
                  <thead>
                    <tr>
                      <th>
                        <span>故障码</span>
                      </th>
                      <th>
                        <span>等级</span>
                      </th>
                      <th>
                        <span>描述</span>
                      </th>
                      <th>
                        <span>类别</span>
                      </th>
                      <th>
                        <span>时间</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let faultData of farmFault.faultFTableDatas" [ngStyle]="{'color':faultData.confirm?'#fff':'#e6bd00','background':!faultData.confirm?'#00693e':'#026fdb'}">
                      <td>
                        <span [ngStyle]="{'background':faultData.faultLevelColor,'color':'#fff'}"> {{faultData.faultCode}} </span>
                      </td>
                      <td>
                        <span> {{faultData.faultLevelName}}</span>
                      </td>
                      <td>
                        <span> {{faultData.desc}}</span>
                      </td>
                      <td>
                        <span> {{faultData.components}}</span>
                      </td>
                      <!-- <td>
                        <span> {{faultData.faultLevelName}}</span>
                      </td>
                      <td>
                        <span> {{faultData.turbineName}}{{faultData.faultDesc}} </span>
                      </td>
                      <td>
                        <span> {{faultData.turbComponentName}}-{{faultData.subcomponentName}}-{{faultData.partsName}} </span>
                      </td> -->
                      <td>
                        <span>{{faultData.faultTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
                      </td>
                  </tbody>
                </table>
              </div>
            </md-tab>
          </md-tab-group>
        </div>
      </section>
    </section>

    <!--设备预警-->
    <app-early-warning class="flex-full"
      [hidden]="active1 || active3"
      [desc]="desc"
      [stateName]="stateName"
      (earlyWarningDataTotalChange)="onEarlyWarningDataTotalChange($event)">

    </app-early-warning>
    <!--升压站-->
    <app-substation class="flex-full" #substation
      [hidden]="active1 || active2"
      (substationDataTotalChange)="onSubstationDataTotalChange($event)">
    </app-substation>

  </section>
</section>

<app-audio #audio
*ngFor="let item of audios;let i=index"
[src]="item.audioSrc" [volume]="item.volume" [muted]="item.muted">
</app-audio>
